<!--
 * @Overview:   403
 * @Author:     Zi_Jun
 * @Email:      zijun2030@163.com
 * @Date:       2020/12/10 16:31
 * @Mark:       403权限错误页面
 -->

<template>
  <div class="page-container flex-center">
    <div class="page-content flex-y-y-center">
      <img :src="svgUrl" alt="" class="error-img" />
      <p class="tip-text">{{ errorText }}</p>
      <el-button round @click="goToHome">{{ btnText }}</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElButton } from 'element-plus';
import errorSvg from '/@/assets/svg/403.svg';

export default defineComponent({
  name: '404',
  components: { ElButton },
  setup() {
    const svgUrl = ref(errorSvg);
    const staticText = {
      errorText: '抱歉，您没有操作权限！',
      btnText: '返回首页',
    };
    return { svgUrl, ...staticText };
  },
  methods: {
    goToHome() {
      this.$router.push({ name: 'Home' });
    },
  },
});
</script>

<style scoped lang="scss">
.page-container {
  height: 100%;
  box-sizing: border-box;
  padding: 40px;
}
.page-content {
  height: 100%;
  width: 80%;
  background: rgba(239, 243, 245, 0.6);
  border-radius: 10px;
}
.error-img {
  width: 45%;
}
.tip-text {
  color: $color-6;
  font-size: 16px;
}
</style>
